<template>
  <el-dialog
    class="ba-operate-dialog"
    style="width: 1000px"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        style="width: 100%; height: 500px"
      >
        <Step ref="formRef" />
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="lastStep">上一步</el-button>
        <el-button @click="nextStep">下一步</el-button>
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="onSubmit()"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import Step from "./components/tabStep.vue";
import { ElNotification } from "element-plus"; //处理导航信息

type Option = {
  id: number;
  label: string;
  children: Option[];
};
//接受来自父组件的注入
const baTable = inject("baTable") as baTableClass;
const formRef = ref();
const standard = inject("standard") as any;

const state: {
  deptOptions: Option[];
  showBtn: boolean;
} = reactive({
  deptOptions: [], //部门列表
  showBtn: false,
});

//上一步
const lastStep = () => {
  formRef.value.handleLastStep();
};
//下一步
const nextStep = () => {
  formRef.value.handleNextStep();
};

const onSubmit = () => {
  if (standard.equipmentInfos && standard.equipmentInfos.length > 0) {
    baTable.api
      .postData(baTable.form.operate!, baTable.form.items!)
      .then((res: any) => {
        baTable.onTableHeaderAction("refresh", {});
        baTable.form.submitLoading = false;
        baTable.form.operateIds?.shift();
        if (baTable.form.operateIds!.length > 0) {
          baTable.toggleForm("edit", baTable.form.operateIds);
        } else {
          baTable.toggleForm();
        }
        baTable.runAfter("onSubmit", { res });
      });
  } else {
    ElNotification({
      type: "warning",
      message: "请完成所有步骤再保存计划",
    });
  }
};

onMounted(() => {
  setTimeout(() => {
    console.log("表单", baTable.form.items!.equipmentInfos);

    //计划步骤2从设备列表中选取设备与标准id进行绑定 编辑的时候反显数据
    standard.equipmentInfos = baTable.form.items!.equipmentInfos
      ? baTable.form.items!.equipmentInfos
      : [];
  }, 500);
});
</script>
<style lang="scss" scoped>
.ba-operate-form {
  padding-top: 0;
}
</style>
